مشروع تطبيق الكوبونات والخصومات والكاش باك
1) مقدمة المشروع
تطبيق الموبايل هو الواجهة الرئيسية للمستخدم النهائي، ويهدف إلى:

عرض الكوبونات والخصومات

عرض المتاجر والعروض

دعم الكاش باك

حفظ المفضلة

إدارة حساب المستخدم

استقبال الإشعارات

دعم اللغة العربية والإنجليزية

دعم أكثر من دولة

التطبيق سيكون مبني باستخدام:

React Native

TypeScript

React Navigation

Axios

Zustand أو Redux Toolkit

AsyncStorage

Firebase Notifications

2) الهدف من التطبيق
التطبيق يجب أن يوفّر تجربة سهلة وسريعة للمستخدم بحيث يستطيع:

تصفح المتاجر

الوصول للكوبونات بسرعة

نسخ الأكواد

الانتقال إلى المتجر

تفعيل الكاش باك

حفظ المفضلة

تعديل بياناته

استقبال العروض الجديدة عبر الإشعارات

3) التقنية المعتمدة
3.1 Framework
React Native

3.2 Language
TypeScript

3.3 Navigation
React Navigation

3.4 State Management
Zustand أو Redux Toolkit

3.5 API Calls
Axios

3.6 Local Storage
AsyncStorage

3.7 Notifications
Firebase Cloud Messaging

3.8 UI Library
اختياري:

React Native Paper

NativeBase

أو Custom UI

4) هيكل المشروع
mobile-app/
│
├── src/
│   ├── assets/
│   │   ├── images/
│   │   ├── icons/
│   │   └── fonts/
│   │
│   ├── components/
│   │   ├── common/
│   │   ├── cards/
│   │   ├── buttons/
│   │   ├── inputs/
│   │   └── modals/
│   │
│   ├── screens/
│   │   ├── splash/
│   │   ├── onboarding/
│   │   ├── auth/
│   │   ├── home/
│   │   ├── discover/
│   │   ├── stores/
│   │   ├── coupons/
│   │   ├── cashback/
│   │   ├── favorites/
│   │   ├── notifications/
│   │   ├── profile/
│   │   └── settings/
│   │
│   ├── navigation/
│   │   ├── RootNavigator.tsx
│   │   ├── AuthNavigator.tsx
│   │   ├── MainTabNavigator.tsx
│   │   └── AppStackNavigator.tsx
│   │
│   ├── services/
│   │   ├── api.ts
│   │   ├── auth.service.ts
│   │   ├── home.service.ts
│   │   ├── stores.service.ts
│   │   ├── coupons.service.ts
│   │   ├── cashback.service.ts
│   │   ├── favorites.service.ts
│   │   ├── notifications.service.ts
│   │   └── profile.service.ts
│   │
│   ├── store/
│   │   ├── auth.store.ts
│   │   ├── app.store.ts
│   │   ├── favorites.store.ts
│   │   ├── home.store.ts
│   │   └── notification.store.ts
│   │
│   ├── hooks/
│   ├── utils/
│   ├── constants/
│   ├── types/
│   └── localization/
│
├── App.tsx
└── package.json
5) أنواع المستخدمين داخل التطبيق
5.1 زائر
يستطيع:

تصفح الصفحة الرئيسية

عرض المتاجر

عرض الكوبونات

البحث

تصفح التصنيفات

5.2 مستخدم مسجل
يستطيع:

حفظ المفضلة

تفعيل الكاش باك

تعديل الحساب

استقبال الإشعارات الشخصية

متابعة سجل الاستخدام

6) تدفق التطبيق
6.1 أول دخول
Splash Screen

Onboarding

اختيار اللغة

اختيار الدولة

دخول / تسجيل / تخطي

6.2 بعد الدخول
الانتقال إلى Main Tabs:

الرئيسية

اكتشف

الكاش باك

الحساب

7) Navigation Structure
7.1 Root Navigator
يتحقق من:

هل المستخدم فتح التطبيق أول مرة؟

هل المستخدم مسجل دخول؟

هل اللغة والدولة محفوظة؟

7.2 Auth Navigator
يشمل:

Login

Register

Forgot Password

OTP Verification

7.3 Main Tab Navigator
التبويبات الرئيسية:

Home

Discover

Cashback

Account

7.4 App Stack
شاشات إضافية:

Store Details

Coupon Details

Favorites

Notifications

Search

FAQ

Terms

Privacy

Contact Us

8) الشاشات الأساسية
8.1 Splash Screen
الهدف
عرض الشعار

تحميل الإعدادات الأساسية

التحقق من حالة المستخدم

الوظائف
قراءة token

قراءة language

قراءة country

التوجيه المناسب

8.2 Onboarding Screen
الهدف
شرح فكرة التطبيق للمستخدم

المحتوى
شاشة 1: كوبونات وخصومات

شاشة 2: متاجر وعروض

شاشة 3: كاش باك ومفضلة

الأزرار
التالي

تخطي

ابدأ الآن

8.3 اختيار اللغة
العناصر
قائمة اللغات

زر حفظ

المطلوب من API
GET /languages

8.4 اختيار الدولة
العناصر
قائمة الدول

علم الدولة

زر حفظ

المطلوب من API
GET /countries

8.5 Login Screen
العناصر
Email / Phone

Password

زر دخول

نسيت كلمة المرور

إنشاء حساب

المطلوب
POST /auth/login

8.6 Register Screen
العناصر
الاسم

الإيميل

رقم الهاتف

كلمة المرور

تأكيد كلمة المرور

كود الإحالة اختياري

المطلوب
POST /auth/register

8.7 Home Screen
الهدف
عرض أهم محتويات التطبيق

الأقسام
Header

Search Bar

Banner Slider

Categories

Featured Stores

Featured Coupons

Cashback Stores

Latest Offers

المطلوب من API
GET /home

البيانات المطلوبة
banners

categories

featuredStores

featuredCoupons

cashbackStores

8.8 Discover Screen
الهدف
عرض جميع العروض والمتاجر

العناصر
Tabs أو Segments:

الكل

الكوبونات

المتاجر

فلترة

ترتيب

Grid / List View

المطلوب من API
GET /stores

GET /coupons

الفلاتر
category_id

search

featured

sort

8.9 Store Details Screen
الهدف
عرض تفاصيل متجر محدد

العناصر
Logo

اسم المتجر

وصف المتجر

زر مفضلة

زر مشاركة

زر تسوق الآن

قائمة الكوبونات

قسم الكاش باك إن وجد

المطلوب من API
GET /stores/{id}

GET /stores/{id}/coupons

GET /stores/{id}/cashback

8.10 Coupon Details Screen
الهدف
عرض تفاصيل كوبون أو عرض

العناصر
اسم المتجر

اللوجو

الكود

نسبة الخصم

الوصف

شروط الاستخدام

زر نسخ الكود

زر تسوق الآن

المطلوب من API
GET /coupons/{id}

POST /coupons/{id}/copy

POST /coupons/{id}/click

8.11 Cashback Screen
الهدف
عرض متاجر الكاش باك

العناصر
Banner توضيحي

قائمة المتاجر

نسبة الكاش باك

الشروط

زر تفعيل

المطلوب من API
GET /cashback/stores

GET /cashback/offers

POST /cashback/activate/{store_id}

8.12 Favorites Screen
الهدف
عرض العناصر المحفوظة

العناصر
Stores Favorites

Coupons Favorites

زر إزالة

المطلوب من API
GET /favorites

POST /favorites/toggle

8.13 Notifications Screen
الهدف
عرض الإشعارات للمستخدم

العناصر
عنوان الإشعار

محتوى مختصر

تاريخ

حالة القراءة

المطلوب من API
GET /notifications

POST /notifications/read/{id}

8.14 Account Screen
الهدف
إدارة الحساب والإعدادات

العناصر
بيانات المستخدم

اللغة

الدولة

المفضلة

سجل الكاش باك

الأسئلة الشائعة

الشروط

الخصوصية

تواصل معنا

تسجيل الخروج

المطلوب من API
GET /profile

PUT /profile

PUT /profile/language

PUT /profile/country

8.15 Search Screen
الهدف
البحث في المتاجر والكوبونات

العناصر
Input search

نتائج البحث

فلترة حسب النوع

المطلوب من API
GET /stores?search=

GET /coupons?search=

9) المكونات المشتركة
9.1 AppHeader
يستخدم في أغلب الشاشات ويشمل:

عنوان الصفحة

زر رجوع

زر إشعارات

زر مشاركة حسب الحاجة

9.2 StoreCard
يعرض:

لوجو

اسم المتجر

وصف مختصر

نسبة خصم أو كاش باك

9.3 CouponCard
يعرض:

اسم المتجر

الكود

نسبة الخصم

الوصف

زر نسخ

9.4 CashbackCard
يعرض:

المتجر

نسبة الكاش باك

زر تفعيل

9.5 BannerCarousel
يعرض البنرات الرئيسية

9.6 FavoriteButton
يعمل toggle للمفضلة

9.7 FilterModal
يعرض خيارات:

الترتيب

التصنيفات

نوع العروض

9.8 SearchInput
بحث عام داخل التطبيق

10) إدارة الحالة State Management
10.1 authStore
يحتفظ بـ:

user

token

isAuthenticated

10.2 appStore
يحتفظ بـ:

language

country

theme

isFirstLaunch

10.3 homeStore
يحتفظ بـ:

banners

categories

featuredStores

featuredCoupons

10.4 favoritesStore
يحتفظ بـ:

favoriteStores

favoriteCoupons

10.5 notificationsStore
يحتفظ بـ:

notifications

unreadCount

11) التخزين المحلي AsyncStorage
يتم حفظ:

access_token

refresh_token إن وجد

user_data

selected_language

selected_country

onboarding_done

app_settings

12) الاتصال بالـ API
12.1 ملف api.ts
يحتوي على:

baseURL

headers

token interceptor

error handling

مثال هيكل:

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:8000/api/v1',
  timeout: 15000,
});

api.interceptors.request.use(async config => {
  return config;
});

export default api;
12.2 Services Layer
كل موديول له service مستقل:

auth.service.ts

stores.service.ts

coupons.service.ts

cashback.service.ts

13) نماذج البيانات Types
User
export interface User {
  id: number;
  name: string;
  email: string;
  phone?: string;
  language_id?: number;
  country_id?: number;
}
Store
export interface Store {
  id: number;
  name: string;
  logo: string;
  description?: string;
  cashback_rate?: number;
  is_featured?: boolean;
}
Coupon
export interface Coupon {
  id: number;
  store_id: number;
  title: string;
  code?: string;
  type: 'code' | 'deal';
  discount_value?: string | number;
  description?: string;
}
14) Authentication Flow
عند تسجيل الدخول
استدعاء API

تخزين token

جلب بيانات المستخدم

التحويل إلى Main Tabs

عند تسجيل الخروج
حذف token

حذف بيانات المستخدم

العودة إلى شاشة Login

15) Favorites Flow
عند الضغط على زر المفضلة
إذا المستخدم غير مسجل: يفتح Login

إذا مسجل: إرسال toggle إلى API

تحديث local state مباشرة

16) Coupon Copy Flow
عند الضغط على زر نسخ:

نسخ الكود إلى Clipboard

إرسال POST /coupons/{id}/copy

إظهار Toast: تم نسخ الكود

17) Store Redirect Flow
عند الضغط على تسوق الآن:

إرسال POST /coupons/{id}/click أو store click

فتح الرابط الخارجي داخل Browser

18) Notifications Flow
تسجيل FCM Token

إرسال التوكن إلى الباك إند

استقبال الإشعارات

عند الضغط على الإشعار يتم فتح الشاشة المناسبة

19) التعدد اللغوي i18n
يجب دعم:

العربية RTL

الإنجليزية LTR

المطلوب
ملفات ترجمة:

ar.json

en.json

تغيير الاتجاه تلقائيًا

كل النصوص من ملفات الترجمة وليس hardcoded

20) UI/UX Requirements
تصميم بسيط وسريع

ألوان واضحة

أزرار كبيرة

تجربة نسخ الكوبون سهلة

دعم الشاشات الصغيرة والكبيرة

Skeleton Loading

Empty States

Error States

21) الحماية والأمان
حفظ التوكن بشكل آمن

حماية الشاشات الخاصة

منع الوصول للمفضلة والحساب بدون تسجيل

التحقق من صلاحية الجلسة

التعامل مع 401 تلقائيًا

22) التعامل مع الأخطاء
أمثلة
فشل الإنترنت

خطأ في السيرفر

بيانات دخول خاطئة

كوبون غير متاح

متجر غير موجود

واجهة الاستخدام
Toast / Alert

Retry Button

رسائل واضحة للمستخدم

23) الأداء Performance
Pagination للقوائم

Lazy Loading للصور

FlatList بدل ScrollView للقوائم الطويلة

Cache للبيانات الأساسية

تقليل إعادة الرسم

24) الاختبارات المطلوبة
Functional Testing
Login/Register

Copy Coupon

Favorite Toggle

Cashback Activate

Search

Notifications

UI Testing
توافق على Android

توافق على iPhone

RTL/LTR

أحجام شاشات مختلفة

25) MVP Version
أول نسخة من التطبيق يفضل تشمل:

Splash

Login / Register

Home

Discover

Store Details

Coupon Details

Cashback

Favorites

Account

Notifications

Language / Country

26) خطة التنفيذ
المرحلة 1
إعداد المشروع

Navigation

Theme

Localization

API setup

المرحلة 2
Auth

Home

Discover

Store Details

Coupon Details

المرحلة 3
Favorites

Cashback

Profile

Notifications

المرحلة 4
تحسين الأداء

الاختبارات

التجهيز للنشر

27) Dependencies مقترحة
npm install @react-navigation/native
npm install @react-navigation/native-stack
npm install @react-navigation/bottom-tabs
npm install react-native-screens react-native-safe-area-context
npm install axios
npm install zustand
npm install @react-native-async-storage/async-storage
npm install react-native-vector-icons
npm install react-native-toast-message
npm install i18next react-i18next
npm install @react-native-clipboard/clipboard
ولو Expo نضيف حسب الحاجة:

npx expo install expo-localization
npx expo install expo-notifications
28) تسمية الملفات المقترحة
HomeScreen.tsx

DiscoverScreen.tsx

StoreDetailsScreen.tsx

CouponDetailsScreen.tsx

CashbackScreen.tsx

FavoritesScreen.tsx

AccountScreen.tsx

NotificationsScreen.tsx

29) المخرجات النهائية المطلوبة من فريق الموبايل
React Native App كامل

TypeScript clean structure

Reusable components

API integration

RTL support

Android build

iOS build

30) ملاحظات مهمة للمشروع
التطبيق والويب يجب يشتركان في نفس الـ API

كل تعديل من الداشبورد يظهر مباشرة بالموبايل

الكوبونات لازم تدعم نوعين:

Code

Deal

الكاش باك لازم يكون قابل للتفعيل والتتبع

المفضلة لا تعمل إلا بعد تسجيل الدخول

